<template>
<div class="d-flex flex-column-fluid">
	<!--begin::Container-->
	<div class="container">
    <!--begin::Row-->
		<div class="row">
      <div class="col-xl-8"> 
        <Widget9></Widget9> 
			</div>
			<div class="col-xl-4"> 
        <Widget3></Widget3> 
			</div>
		</div>
		<!--end::Row-->

    <div class="row">
			<div class="col-xl-8">      
        <Widget5></Widget5>
			</div>
      <div class="col-xl-4">
        <Widget4></Widget4>
      </div>
		</div>

    <div class="row">
			<div class="col-xl-8">  
        <Widget10></Widget10>  
			</div>
      <div class="col-xl-4">   
        <Widget1></Widget1>   
			</div>
		</div>
	</div>
	<!--end::Container-->
</div>
</template>

<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import Widget1 from "@/view/index/widget-1.vue";
import Widget7 from "@/view/index/widget-7.vue";
import Widget3 from "@/view/index/widget-3.vue";
import Widget4 from "@/view/index/widget-4.vue";
import Widget5 from "@/view/index/widget-5.vue";
import Widget6 from "@/view/index/widget-6.vue";
import Widget9 from "@/view/index/widget-9.vue";
import Widget10 from "@/view/index/widget-10.vue";
import { mapGetters } from "vuex";
export default {
  name: "dashboard",
  components: {
    Widget1,
    Widget3,
    Widget4,
    Widget5,
    Widget3,
    Widget9,
    Widget10,
  },
  data() {
    return {    
      searchForm: { type: "" },  
      dataList: [],
      browChart: null,
    };
  },
  mounted() {    
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "工作台" }]);
  },
  methods: {
    setActiveTab1(event) {
      this.tabIndex = this.setActiveTab(event);
    },
    setActiveTab2(event) {
      this.tabIndex2 = this.setActiveTab(event);
    },
    /**
     * Set current active on click
     * @param event
     */
    setActiveTab(event) {
      // get all tab links
      const tab = event.target.closest('[role="tablist"]');
      const links = tab.querySelectorAll(".nav-link");
      // remove active tab links
      for (let i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
      }

      // set current active tab
      event.target.classList.add("active");

      // set clicked tab index to bootstrap tab
      return parseInt(event.target.getAttribute("data-tab"));
    },
  }
};
</script>
